<template>
  <view class="page">
    <view class="system-height" :style="{height:statusBarHeight}"></view>
    <!-- #ifdef MP -->
    <view class="title-bar" style="height: 43px;">
      <view class="icon" @click="back" v-if="!isHome">
        <image src="../static/left.png"></image>
      </view>
      <view class="icon" @click="home" v-else>
        <image src="../static/home.png"></image>
      </view>
      账户登录
    </view>
    <!-- #endif -->
    <view class="wechat_login">
      <view class="img">
        <image src="../static/wechat_login.png" mode="widthFix"></image>
      </view>
      <view class="btn-wrapper">
        <!-- #ifdef H5 -->
        <button hover-class="none" @click="wechatLogin" class="btn1" :style="{backgroundColor:themConfig.theme.color}">微信登录</button>
        <!-- #endif -->
      </view>
    </view>
    <uv-loading-page :loading="loginLoading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>

  </view>
</template>
<script>
import diyJson from '@/config/diy.js';

const app = getApp();
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import Wechat from '@/libs/wechat.js';
import * as LoginApi from '@/api/user.js';
import * as UserApi from '@/api/member/user.js';
import {BASE_CONFIG} from "@/config/app";

export default {
  computed: {
    theam() {
      return theam
    }
  },
  data() {
    return {
      themConfig: diyJson.commonStyle,
      phone: '',
      statusBarHeight: statusBarHeight,
      isHome: false,
      isPhoneBox: false,
      // logoUrl: '',
      code: '',
      authKey: '',
      options: '',
      userInfo: {},
      loginLoading: false,

      socialCode: '',
      socialState: '',
    }
  },
  components: {},
  onLoad(options) {

    // #ifdef H5
    document.body.addEventListener("focusout", () => {
      setTimeout(() => {
        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop ||
            0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    });
    const {code} = options;
    this.options = options
    // 获取确认授权code
    this.code = code || ''
    if (code && this.options.scope !== 'snsapi_base') {

    }
    // #endif
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    home() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },

    getUserInfo() {
      UserApi.getUserInfo().then(res => {
        uni.hideLoading();
        this.userInfo = res.data
        this.$store.commit("UPDATE_USERINFO", res.data);
        this.$util.Tips({
          title: '登录成功',
          icon: 'success'
        }, {
          tab: 3
        })
      });
    },
    // #ifdef H5
    // 公众号登录
    wechatLogin() {
      // #ifdef H5
      let that = this;
      // 静默登录的情况一：微信公众号
      if (!that.$store.getters.isLogin && Wechat.isWeixin()) {
        this.loginLoading = true;
        // if (option.query.hasOwnProperty('code')) {
        //   LoginApi.loginWxH5({
        //     "appId": BASE_CONFIG.appId,
        //     "wxCode": option.query.code,
        //     "loginType": 21
        //   }).then(res => {
        //     console.log("登录结果", res)
        //     that.$store.commit("LOGIN", {
        //       'token': res.data.accessToken
        //     });
        //     that.getUserInfo(res.data);
        //   })
        // } else {
        let scope = 'snsapi_userinfo';
        LoginApi.getMpWebAuthUrl({"appId": BASE_CONFIG.appId, "scope": scope, "redirectUri": BASE_CONFIG.H5WebHost}).then(res => {
          location.replace(res.data.authUrl);
        })
        // }
      } else {
          location.replace(this.$Cache.get("login_back_url") || "/pages/index/index");
      }
      // #endif
    },
    // #endif
  }
}
</script>

<style lang="scss">
page {
  background: #fff;
  height: 100%;
}

.page {
  background: #fff;
  height: 100%;
}

.wechat_login {
  padding: 72rpx 34rpx;

  .img image {
    width: 100%;
  }

  .btn-wrapper {
    margin-top: 86rpx;
    padding: 0 66rpx;

    button {
      width: 100%;
      height: 86rpx;
      line-height: 86rpx;
      margin-bottom: 40rpx;
      border-radius: 120rpx;
      font-size: 30rpx;

      &.btn1 {
        color: #fff;
      }

      &.btn2 {
        color: #666666;
        border: 1px solid #666666;
      }
    }
  }
}

.title-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
}

.icon {
  position: absolute;
  left: 30rpx;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86rpx;
  height: 86rpx;

  image {
    width: 50rpx;
    height: 50rpx;
  }
}
</style>
